<template>
    <div>
        <div class="crumbs">
            <!-- <el-breadcrumb separator="/">
                <el-breadcrumb-item> -->
            <!-- <div class="indexTitle">项目管理</div> -->
            <div class="contentbox">
                <div class="contentsize">委托单位录入</div>
                <div>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
            <!-- </el-breadcrumb-item>
            </el-breadcrumb> -->
        </div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top" :rules="rules">
                <el-form-item label="单位名称:" style="width: 30%" prop="dwmc">
                    <el-input v-model="form.dwmc" placeholder="请输入单位名称" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="单位编号:" style="width: 30%" prop="dwbh">
                    <el-input v-model="form.dwbh" placeholder="请输入单位编号" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="单位地址:" style="width: 30%" prop="dwdz">
                    <el-input v-model="form.dwdz" placeholder="请输入单位地址" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="联系人:" style="width: 30%" prop="lxr">
                    <el-input v-model="form.lxr" placeholder="请输入联系人" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:" style="width: 30%" prop="lxdh">
                    <el-input v-model="form.lxdh" placeholder="请输入联系电话" class="search-input"></el-input>
                </el-form-item>
                <!-- 是否支持多文进上传 multiple -->
                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'yyzz') }" :before-remove="beforeRemoves"
                    multiple :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'yyzz')"
                    :headers="myHeaders" :file-list="filefileList">
                    <div class="unloadTitle">营业执照</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'tght') }" :before-remove="beforeRemoves"
                    multiple :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'tght')"
                    :headers="myHeaders" :file-list="filefileList">
                    <div class="unloadTitle">托管合同</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
            </el-form>
        </div>
    </div>
</template>
<script>
import { wtdwlistadd } from '@/api/index';
import global from '@/components/common/httpurl.vue'
export default {
    name: 'wtdwgladd',
    data() {
        return {
            addlistval: false,
            httpUrl: global.httpUrl,//公共地址
            filefileList: [],//文件列表
            fileListshandle: [],
            // 请求表头信息
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            form: {
                create_time: '',//创建时间 ,
                current: 1,//第几页 ,
                dwbh: '',//单位编号 ,
                dwmc: '',//单位名称 ,
                dwdz :'',//单位地址
                id: '',//id ,
                lxdh: '',// 联系电话 ,
                lxr: '',//联系人 ,
                pageSize: 10,//每页数量 ,
                status_code: 1,//1正常 2删除
                tght: '',//托管合同 ,
                yyzz: '',//营业执照
            },
            fjform: {},//房间表单
            fileList: [],
            rules: {}
        };
    },
    methods: {
        // 创建
        submitForm() {
            wtdwlistadd(this.form).then((res) => {
                if (res.code == 200) {
                    this.$message.success('新增单位成功');
                    this.$router.go(-1);
                } else {
                    this.$message.error('新增单位失败');
                }
            });
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 文件
        handleRemoves(file, fileList, filetype) {
            console.log(fileList)
            console.log('filetype', filetype)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this.form[filetype] = this.fileListshandle.toString()

        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists, filetype) {
            console.log(fileLists)
            console.log('filetype', filetype)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this.form[filetype] = this.fileListshandle.toString()
        },

    },
    created() {
        console.log(global.httpUrl)
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}
</style>
<style></style>